<template>
    <div class="present">
        <div class="active">
            <span class="iconfont">&#xe600;</span>最新活动:
        </div>
        <div class="wrapper">
            <swiper :options="swiperOption">
            <swiper-slide v-for="item of swiperList" :key="item.id">
                <img class="swiper-img" :src="item.imgUrl">
            </swiper-slide>
            <div class="swiper-pagination" slot="pagination"></div>
            </swiper>
        </div>
        <div class="bottom">
            <div class="bot-left">
              <img class="bot-img" src="https://img.4008823823.com.cn/kfcios/Banner/Banner_2_91ef0c0be89b41059e38dccc114fa055.jpg">
            </div>
            <div class="bot-right">
              <img class="bot-img" src="https://img.4008823823.com.cn/kfcios/Banner/Banner_2_6c11dae8786949f3bf1e2d95389deed7.jpg">
            </div>
        </div>
    </div>
</template>

<script>
export default {
  name: 'IndexSwrap',
  data () {
    return {
      swiperOption: {
        pagination: '.swiper-pagination',
        loop: true
      },
      swiperList: [{
        id: '0001',
        imgUrl: 'https://img.4008823823.com.cn/kfcios/Banner/Banner_1_f7064b448c1b456aada0d8525b8f5fcd.jpg'
      }, {
        id: '0002',
        imgUrl: 'https://img.4008823823.com.cn/kfcios/Banner/Banner_1_662c9dd0e51f4384a4dab469469114f1.jpg'
      }, {
        id: '0003',
        imgUrl: 'https://img.4008823823.com.cn/kfcios/Banner/Banner_1_2df603ebfa9c44c5b79f12f4948479ac.jpg'
      }, {
        id: '0004',
        imgUrl: 'https://img.4008823823.com.cn/kfcios/Banner/Banner_1_e9c33e9af05c4fd394ca46fbcd7dac93.jpg'
      }, {
        id: '0005',
        imgUrl: 'https://img.4008823823.com.cn/kfcios/Banner/Banner_1_d12a3cffd58e47cf82325c4ba9d074c9.jpg'
      }]
    }
  }
}
</script>

<style lang="stylus" scoped>
    .present
      width: 36%
      height: 11rem
      margin-left: .3rem
      margin-top: .15rem
      .active
        width: 100%
        height: .4rem
        background: rgb(240,240,240)
        padding-top: .1rem
      .wrapper >>> .swiper-pagination-bullet-active
        background: #fff
      .wrapper
        overflow:hidden
        width:100%
        height:0
        height: 6.3rem
        margin-top: .2rem
        border: 1px solid red
        .swiper-img
            width:100%
            height: 100%
      .bottom
        width: 100%
        height: 2.9rem
        margin-top: .2rem
        display: flex
        .bot-left
          width: 50%
          height: 100%
        .bot-right
          width: 50%
          height: 100%
          .bot-img
            width: 100%
            height: 100%
</style>
